<template>
    <div id="interviewReply">
        <!--借款人信息-->
        <div class="interviewReply-conllapse">
            <!--借款人资料-->
            <el-collapse class="borrrowing-conllapse" v-model="conllapseArrData">
                <el-collapse-item title="借款人资料" name="1">
                    <ul class="borrowing-ul">
                        <li>
                            <span>订单编号：</span>
                            <span>{{this.$route.query.loanNo}}</span>
                        </li>
                        <li>
                            <span>姓名：</span>
                            <span>{{interviewReply.realName}}</span>
                        </li>
                        <li>
                            <span>年龄：</span>
                            <span>{{interviewReply.age}}岁</span>
                        </li>
                        <li>
                            <span>性别：</span>
                            <span>{{interviewReply.sex}}</span>
                        </li>
                        <li>
                            <span>身份证号：</span>
                            <span>{{interviewReply.idcard}}</span>
                        </li>
                        <li>
                            <span>手机号：</span>
                            <span>{{interviewReply.phone}}</span>
                        </li>
                        <li>
                            <span>借款用途：</span>
                            <span>{{interviewReply.loanPurpose}}</span>
                        </li>
                        <li>
                            <span>是否有抵押：</span>
                            <span>{{interviewReply.mortgage}}</span>
                        </li>
                        <li>
                            <span>抵押物：</span>
                            <span>{{interviewReply.mortgageObject}}</span>
                        </li>
                        <li>
                            <span>是否有质押：</span>
                            <span>{{interviewReply.pledge}}</span>
                        </li>
                        <li>
                            <span>质押物：</span>
                            <span>{{interviewReply.pledgeObject}}</span>
                        </li>
                        <li>
                            <span>借款期限：</span>
                            <span>{{interviewReply.loanTime}}{{interviewReply.loanUnit}}</span>
                        </li>
                        <li>
                            <span>借款金额：</span>
                            <span>{{interviewReply.loanAmount}}元</span>
                        </li>
                    </ul>
                </el-collapse-item>
            </el-collapse>

            <!--车辆信息-->
            <el-collapse class="borrrowing-conllapse" v-model="conllapseArrData">
                <el-collapse-item title="车辆信息" name="2">
                    <ul class="borrowing-ul">
                        <li>
                            <span>车辆品牌：</span>
                            <span>{{interviewReply.carType}}</span>
                        </li>
                        <li>
                            <span>车牌号：</span>
                            <span>{{interviewReply.carNo}}</span>
                        </li>
                        <li>
                            <span>里程数（公里）：</span>
                            <span>{{interviewReply.carMileage}}</span>
                        </li>
                        <li>
                            <span>购车价格（元）：</span>
                            <span>{{interviewReply.carBuyAmount}}元</span>
                        </li>
                        <li>
                            <span>评估价格（元）：</span>
                            <span>{{interviewReply.carAssetAmount}}元</span>
                        </li>
                        <li>
                            <span>车辆初次登记时间：</span>
                            <span>{{interviewReply.carBuyTime}}</span>
                        </li>
                        <li style="width:100%;">
                            <span>车辆说明：</span>
                            <span>{{interviewReply.carRemark}}</span>
                        </li>
                    </ul>
                </el-collapse-item>
            </el-collapse>

            <!--借款人资质信息-->
            <el-collapse class="borrrowing-conllapse" v-model="conllapseArrData">
                <el-collapse-item title="借款人资质信息" name="3">
                    <ul class="borrowing-ul">
                        <li>
                            <span>户籍：</span>
                            <span>{{interviewReply.familyRegister}}</span>
                        </li>
                        <li>
                            <span>学历：</span>
                            <span>{{interviewReply.education}}</span>
                        </li>
                        <li>
                            <span>婚姻状况：</span>
                            <span>{{interviewReply.marryStatus}}</span>
                        </li>
                        <li>
                            <span>车辆状况：</span>
                            <span>{{interviewReply.carStatus}}</span>
                        </li>
                        <li>
                            <span>住房状况：</span>
                            <span>{{interviewReply.houseStatus}}</span>
                        </li>
                        <li>
                            <span>年收入：</span>
                            <span>{{interviewReply.annualIncome}}元</span>
                        </li>
                        <li>
                            <span>个人月收入：</span>
                            <span>{{interviewReply.personalIncome}}元</span>
                        </li>
                        <li>
                            <span>家庭月收入：</span>
                            <span>{{interviewReply.familyIncome}}元</span>
                        </li>
                        <li>
                            <span>工作城市：</span>
                            <span>{{interviewReply.workCity}}</span>
                        </li>
                        <li>
                            <span>工作年限：</span>
                            <span>{{interviewReply.workExperience}}</span>
                        </li>
                        <li>
                            <span>公司规模：</span>
                            <span>{{interviewReply.workCompanyPeople}}</span>
                        </li>
                        <li>
                            <span>目前工作单位：</span>
                            <span>{{interviewReply.workCompany}}</span>
                        </li>
                        <li>
                            <span>还款保障：</span>
                            <span>{{interviewReply.repayGuarantee}}</span>
                        </li>
                    </ul>
                </el-collapse-item>
            </el-collapse>

            <!--银行卡信息-->
            <el-collapse class="borrrowing-conllapse" v-model="conllapseArrData">
                <el-collapse-item title="银行卡信息" name="4">
                    <ul class="borrowing-ul">
                        <li>
                            <span>所属银行：</span>
                            <span>{{interviewReply.bank}}</span>
                        </li>
                        <li>
                            <span>银行账号：</span>
                            <span>{{interviewReply.bankAccount}}</span>
                        </li>
                        <li>
                            <span>开户支行：</span>
                            <span>{{interviewReply.bankBranch}}</span>
                        </li>
                        <li>
                            <span>银行预留手机号：</span>
                            <span>{{interviewReply.bankPhone}}</span>
                        </li>
                    </ul>
                </el-collapse-item>
            </el-collapse>

            <!--借款人资质材料-->
            <el-collapse class="borrrowing-conllapse" v-model="conllapseArrData">
                <el-collapse-item title="借款人资质材料" name="5">
                    <ul class="borrowing-ul">
                        <li v-if="filesLength === 0">暂无借款人资质材料</li>
                        <li  v-for="item in interviewReply.files" style="width: 10%;margin-bottom: 10px;cursor: pointer;" @click="openApplyInformation(item)">
                            <span style="color: #20a0ff;">{{item.name}}</span>
                        </li>
                    </ul>
                </el-collapse-item>
            </el-collapse>

            <!--面签批复-->
            <el-collapse v-model="conllapseArrData" v-if="interviewReplyShow">
                <el-collapse-item title="面签批复" name="6">
                    <el-form :model="FormData" ref="FormData" class="el-form" :inline="true" labelWidth="100px" label-position="left">
                        <el-form-item label="是否通过" prop="passStatus" required style="width: 100%;">
                            <el-radio-group v-model="FormData.passStatus" @change="toogleRadio">
                                <el-radio :label=1>通过</el-radio>
                                <el-radio :label=0>不通过</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-form>

                    <!--通过-->
                    <el-form :model="FormData" ref="ruleForm" class="el-form" :rules="ruleForm" :inline="true" labelWidth="100px" v-if="FormData.passStatus === 1" label-position="left">
                        <el-form-item prop="signTime" label="面签时间">
                            <el-date-picker
                                v-model="FormData.signTime"
                                type="datetime"
                                placeholder="选择日期时间"
                                align="right"
                            >
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="面签人" prop="signUser">
                            <el-input :value="signUserInfo" :disabled="true"></el-input>
                        </el-form-item>
                        <el-form-item label="面签额度" prop="signAmount">
                            <el-input v-model.number="FormData.signAmount">
                                <template slot="append">元</template>
                            </el-input>
                        </el-form-item>
                        <el-form-item label="借款期限" prop="signLoanTime" class="signLoanTime" style="width: 310px;">
                            <el-input v-model.number="FormData.signLoanTime">
                                <template slot="append">
                                    <el-select v-model="FormData.signLoanUnit" value="0">
                                        <!-- <el-option label="年" :value=0></el-option> -->
                                        <el-option label="月" :value=1></el-option>
                                        <el-option label="日" :value=2></el-option>
                                    </el-select>
                                </template>
                            </el-input>
                        </el-form-item>
                                                <el-form-item label="利率" prop="signInterestRate">
                            <el-input v-model.number="FormData.signInterestRate" type="text">
                                <template slot="append">%</template>
                            </el-input>
                        </el-form-item>
                        <el-form-item label="综合服务费" prop="signFee">
                            <el-input v-model.number="FormData.signFee">
                                <template slot="append" class="append">元</template>
                            </el-input>
                        </el-form-item>
                        <el-form-item label="还款方式" prop="signRepayType" required>
                            <el-select v-model="FormData.signRepayType" value="0">
                                <el-option label="到期还款" :value=0></el-option>
                                <el-option label="先息后本" :value=1></el-option>
                                <el-option label="等额本息" :value=2></el-option>
                                <el-option label="等额本金" :value=3></el-option>
                            </el-select>
                        </el-form-item><br>
                        <el-form-item label="面签说明" prop="signRemark" style="width: 100%;">
                            <el-input type="textarea" v-model="FormData.signRemark" :rows="5" style="width: 515px;" resize="none"></el-input>
                        </el-form-item>
                        <br>
                        <el-form-item>
                            <el-button type="primary" @click="submitInterview()">提交</el-button>
                        </el-form-item>
                    </el-form>

                    <!--不通过-->
                    <el-form :model="FormData" ref="ruleForm" class="el-form" :rules="ruleForm" :inline="true" labelWidth="100px" v-else label-position="left">
                        <el-form-item label="面签说明" prop="signRemark" style="width: 100%">
                            <el-input type="textarea" v-model="FormData.signRemark" :rows="5" style="width: 473px;" resize="none"></el-input>
                        </el-form-item>
                        <br>
                        <el-form-item>
                            <el-button type="primary">提交</el-button>
                        </el-form-item>
                    </el-form>
                </el-collapse-item>
            </el-collapse>
        </div>

        <!--借款人资质材料-->
        <el-dialog :title="ApplyInformationTitle" :visible.sync="ApplyInformationDialog" class="ApplyInformationDialog">
            <el-carousel :autoplay="false" arrow="always" v-if="filesLength>0" height="200px" indicator-position="outside" trigger="click">
                <el-carousel-item v-for="(item, index) in interviewReply.files" :key="index">
                    <img class="p-file" :src="item.url" alt="照片异常" @click="openBigPhoto(item.url)">
                </el-carousel-item>
            </el-carousel>
        </el-dialog>

        <!--大图片预览-->
        <el-dialog v-model="dialogBigPhoto" class="dialogBigPhoto" size="full">
            <img :src="BigPhotoUrl" alt="" id="rotateIMG">
        </el-dialog>
    </div>
</template>

<script>
    import { signCheck, userLoanInfo } from "@/api/api";
    export default {
        name: "interviewReply",
        data () {
            return {
                // 折叠
                conllapseArrData: ['1', '2', '3', '4', '5', '6'],
                // 借款人面签详情
                interviewReplyShow: false,
                filesLength: "",
                interviewReply: {},
                signUserInfo: "",
                FormData: {
                    loanNo: this.$route.query.loanNo,
                    passStatus: 1,
                    signTime: "",
                    signUser: "1",
                    signAmount: "",
                    signLoanTime: "",
                    signLoanUnit: 1,
                    signInterestRate: "",
                    signFee: "",
                    signRepayType: 0,
                    signRemark: ""
                },
                ruleForm: {
                    // 面签时间
                    signTime: [
                        { type: 'date', required: true, message: '请输入面签时间', trigger: 'change' }
                    ],
                    // 面签人
                    signUser: [
                        { required: true, message: '请输入面签人' }
                    ],
                    // 面签额度
                    signAmount: [
                        { required: true, min: 1000, type: 'number',message: '面签额度不能小于1000元', trigger: 'blur' }
                    ],
                    // 借款期限
                    signLoanTime: [
                        { required: true, type: 'number', message: '借款期限必须为数字值', trigger: 'blur' }
                    ],
                    // 利率
                    signInterestRate: [
                        { required: true, type: 'number', message: '利率必须为数字值', trigger: 'blur' }
                    ],
                    // 综合服务费
                    signFee: [
                        { required: true, type: 'number', message: '综合服务费必须为数字值', trigger: 'blur' }
                    ],
                    // 面签说明
                    signRemark: [
                        { required: true, max: 2000, message: '审核说明在2000字以内', trigger: 'blur' }
                    ]
                },
                ApplyInformationDialog: false,
                ApplyInformationTitle: "",
                ApplyInformationSrc: "",
                // 大图片预览
                dialogBigPhoto: false,
                BigPhotoUrl: ''
            };
        },
        watch: {
            $route (to) {
                if(to.name === "interviewReply"){
                    if (window.sessionStorage["sysUser"]) {
                        let userInfo = JSON.parse(window.sessionStorage.getItem("sysUser"));
                        this.signUserInfo = userInfo.name;
                        this.FormData.signUser = userInfo.userNo;
                    } else {
                        this.$router.push({path: '/login'});
                    }
                    this.loadData();
                    this.$refs.ruleForm.resetFields();
                    this.FormData.signAmount = "";
                    this.FormData.signLoanTime = "";
                    this.FormData.signInterestRate = "";
                    this.FormData.signFee = "";
                    this.FormData.signRemark = "";
                }
            }
        },
        mounted: function () {
            this.$nextTick(function () {
                if (window.sessionStorage["sysUser"]) {
                    let userInfo = JSON.parse(window.sessionStorage.getItem("sysUser"));
                    this.signUserInfo = userInfo.name;
                    this.FormData.signUser = userInfo.userNo;
                } else {
                    this.$router.push({path: '/login'});
                }
                this.loadData();
            });
        },
        methods: {
            // 借款人资质材料：
            openApplyInformation (item) {
                this.ApplyInformationDialog = true;
                this.ApplyInformationTitle = item.name;
                this.ApplyInformationSrc = item.url;
            },
            toogleRadio (value) {
                this.FormData.signRemark = "";
                this.$refs.ruleForm.resetFields();
            },
            // 借款人面签详情
            async loadData () {
                let _this = this;
                await userLoanInfo({
                    "loanNo": this.$route.query.loanNo
                }).then((res) => {
                    if (res.data.state.code === "200") {
                        _this.interviewReplyShow = true;
                        let Data = JSON.parse(res.data.ciphertext);
                        console.log(Data);
                        if (Data !== undefined) {
                            _this.interviewReply = Data;
                            _this.filesLength = _this.interviewReply.files.length;
                        }
                    }
                    if (res.data.state.code === "403") {
                        _this.interviewReplyShow = false;
                    }
                });
            },
            // 面签批复提交；
            async submitInterview () {
                let _this = this;
                await this.$refs.ruleForm.validate((valid) => {
                    this.FormData.loanNo = this.$route.query.loanNo;
                    console.log("this.FormData.loanNo", this.FormData.loanNo);
                    if (valid) {
                        console.log(this.FormData.signFee);
                        signCheck(this.FormData).then(function(res) {
                            if (res.data.state.code === "200") {
                                _this.$message({
                                    message: "成功",
                                    type: 'success'
                                });
                                _this.$router.push({path: "/interview"});
                                _this.FormData.signTime = "";
                                _this.FormData.signUser = "";
                                _this.FormData.signAmount = "";
                                _this.FormData.signLoanTime = "";
                                _this.FormData.signInterestRate = "";
                                _this.FormData.signFee = "";
                                _this.FormData.signRemark = "";
                                _this.$refs.ruleForm.resetFields();
                            } else {
                                _this.$message({
                                    message: res.data.state.message,
                                    type: 'error'
                                });
                            }
                        });
                    }
                });
            },
            // 大图片预览
            openBigPhoto (item) {
                this.dialogBigPhoto = true;
                this.BigPhotoUrl = item;
            }
        }
    };
</script>

<style lang="scss">
    #interviewReply{
        .interviewReply-conllapse{
            margin:20px;
            .el-collapse{
                margin-bottom: 20px;
                .borrowing-ul{
                    font-size:14px;
                    li{
                        width: 25%;
                        float: left;
                        margin-bottom: 20px;
                        span:nth-of-type(1){
                            color: #999999;
                            margin-right: 10px;
                        }
                    }
                }
                .el-form{
                    .el-form-item{
                        width: 310px;
                    }
                    .el-date-picker{
                        width: 200px;
                    }
                    .el-input{
                        width: 200px;
                    }
                    .signLoanTime{
                        width: 200px;
                        .el-select{
                            width: 70px;
                            height: 36px;
                            .el-input{
                                width: 70px;
                            }
                        }
                    }
                    .el-button{
                        margin-left:100px;
                    }
                }
            }
        }
        .ApplyInformationDialog{
            img{
                max-width: 100%;
                max-height: 100%;
                display: block;
                margin: 0 auto;
                text-align: center;
            }
        }
      .dialogBigPhoto{
        img{
                max-width: 100%;
                max-height: 100%;
                display: block;
                margin: 0 auto;
                text-align: center;
        }
      }
    }
</style>
